<template>
    <table>
        <thead>
            <tr>
                <th>今天</th>
                <th>本周</th>
                <th>本月</th>
                <th>总计</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>{{statisData.today}}</td>
                <td>{{statisData.week}}</td>
                <td>{{statisData.month}}</td>
                <td>{{statisData.total}}</td>
            </tr>
        </tbody>
    </table>
</template>

<script>
import {statistics} from '@/api/api.js'
// const statistics = require('@/api/api.js').statistics
export default{
  name: 'statisticstable',
  data () {
    return {
      statisData: {}
    }
  },
  props: ['api'],
  computed: {
    // statisData: {
    //   get () {
    //     return this.$store.state.statisData
    //   }
    // }
  },
  watch: {
    '$route' (to, from) {
        this.fetchData(this.api,19216)
    }
  },
  methods: {
    fetchData(api,uid){
        if(api){
      statistics(api,uid,res=>
        this.statisData = res.data.statisData
      )
        }
    }
  },
  created () {
    this.fetchData(this.api,19216)
  },
  beforeRouteUpdate (to, from, next) {
    next()
  }
}
</script>

<style scoped lang="scss">
@import '../scss/fonts.scss';
table{
    text-align:center;
    @extend %songti;
}
th,td{
    color:$fc;
    vertical-align:middle;
    padding:0 10px;
    height:30px;
}
thead th{
    font-size:12px;
}
tbody td{
    @extend %helvetica;
    color:$fc3;
    font-size:22px;
    font-weight:bold;
}

</style>